<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import { showNotify } from 'vant'
defineProps({
  activeTab: {
    type: Number,
    default: 1
  }
})
const { t } = useI18n()
const show = ref(false)
const types = ref([
  {
    text: '全部类型',
    value: 'all'
  },
  {
    text: '充值',
    value: 'deposit'
  },
  {
    text: '提现',
    value: 'withdrawal'
  },
  {
    text: '交易',
    value: 'trade'
  }
])
const isPositive = ref(true)
const handleSort = () => {
  isPositive.value = !isPositive.value
}
</script>
<template>
  <div class="record">
    <div class="body">
      <div class="flex flex-col gap-20" v-show="activeTab == 1">
        <div
          class="flex items-center justify-between bg-[#F9F9F9] rounded-32px p-30"
          v-for="value in 10"
        >
          <div class="flex items-center">
            <img
              src="/src/assets/icon/public/logo_full.png"
              class="w-60 h-60 rounded-full"
              alt=""
            />
            <div class="ml-14">
              <div class="text-[32px] font-600 text-[#000] font-roboto uppercase mb-8">usdt</div>
              <div class="text-[24px] font-400 text-[#AEB8B7] font-roboto">TetherUS</div>
            </div>
          </div>
          <div>
            <div class="text-[32px] font-600 text-[#000] font-roboto uppercase mb-8">3666.9955</div>
            <div class="text-[24px] font-400 text-[#AEB8B7] font-roboto text-right">3666.99$</div>
          </div>
        </div>
      </div>
      <div class="" v-show="activeTab == 2">
        <div class="flex items-center justify-between mb-26">
          <div class="flex items-center gap-40px">
            <van-popover
              v-model:show="showPopover"
              :actions="types"
              @select="onSelect"
              :show-arrow="false"
            >
              <template #reference>
                <div
                  class="flex items-center text-[24px] font-400 text-[#00000066] font-roboto capitalize"
                >
                  <div class="mr-12px">全部类型</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="10"
                    height="10"
                    viewBox="0 0 20 20"
                    fill="none"
                  >
                    <path
                      d="M2.95806 3.89844H16.9919C17.7685 3.89844 18.3966 4.52167 18.3966 5.29835C18.3966 5.65938 18.258 5.98596 18.0355 6.23335L11.0955 15.4936C10.6305 16.1069 9.75485 16.2357 9.13657 15.7706C9.02776 15.6915 8.93374 15.5973 8.85955 15.4935L1.84005 6.13452C1.38015 5.5211 1.50378 4.64077 2.12202 4.18059C2.37441 3.9876 2.66625 3.89858 2.95806 3.89858V3.89844Z"
                      fill="black"
                      fill-opacity="0.4"
                    />
                  </svg>
                </div>
              </template>
            </van-popover>
            <div
              @click="handleSort"
              class="flex items-center text-[24px] font-400 text-[#00000066] font-roboto capitalize"
            >
              <div class="mr-12px">{{ isPositive ? '正序' : '倒序' }}</div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="10"
                height="10"
                viewBox="0 0 20 20"
                fill="none"
              >
                <path
                  d="M2.95806 3.89844H16.9919C17.7685 3.89844 18.3966 4.52167 18.3966 5.29835C18.3966 5.65938 18.258 5.98596 18.0355 6.23335L11.0955 15.4936C10.6305 16.1069 9.75485 16.2357 9.13657 15.7706C9.02776 15.6915 8.93374 15.5973 8.85955 15.4935L1.84005 6.13452C1.38015 5.5211 1.50378 4.64077 2.12202 4.18059C2.37441 3.9876 2.66625 3.89858 2.95806 3.89858V3.89844Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </div>
          </div>
          <div class="flex items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 36 36"
              fill="none"
            >
              <path
                d="M29.528 10.045C29.7129 9.86058 29.9206 9.65249 30.0556 9.41491C31.0667 8.15958 31.1875 6.25946 30.3391 4.88045C29.4843 3.49143 28.2174 2.78711 26.5737 2.78711H6.23077C5.83656 2.78711 5.42921 2.78711 5.07448 2.89898C4.20591 3.10907 3.41127 3.62242 2.83538 4.34587C2.24876 5.08243 1.92578 5.99297 1.92578 6.90964C1.92578 8.09915 2.37905 9.15334 3.20255 9.87946C5.81835 12.4055 8.42993 15.0161 10.957 17.5433V25.8842L10.9613 25.9544C11.0987 27.0527 11.933 27.6526 12.9428 27.2189L12.9604 27.2106C13.5067 26.9376 13.8199 26.3876 13.8199 25.7018V17.1268C13.8199 16.548 13.6416 16.076 13.2896 15.724C12.0273 14.4616 10.7836 13.1497 9.58112 11.8808C8.3413 10.5727 7.05916 9.22 5.71911 7.87995L5.65347 7.81364L5.57437 7.77462C5.55573 7.76182 5.5146 7.70818 5.48338 7.66718C5.44911 7.62278 5.41571 7.58077 5.38062 7.54245C5.14922 7.24598 5.10043 6.99401 5.20846 6.65402C5.3963 6.22891 5.77296 5.74104 6.23059 5.74104H26.756C27.0059 5.74104 27.2469 5.87604 27.4343 6.1214C27.6775 6.43984 27.768 6.86088 27.6679 7.22843C27.6169 7.43178 27.5321 7.52389 27.2757 7.78074C24.4494 10.5157 21.7497 13.2152 18.8916 16.0731L18.8764 16.0885C18.5868 16.3777 18.2546 16.7987 18.2546 17.4915V31.9052C18.2546 32.0824 18.2546 32.5818 18.6196 32.9814C18.6196 32.9814 18.7304 33.2316 19.2083 33.4133C19.7989 33.6378 20.3759 33.3821 20.3759 33.3821L20.5266 33.2694C21.1175 32.8259 21.1175 32.1353 21.1175 31.7225V18.0907C22.5308 16.6808 23.9953 15.3093 25.4124 13.9823C26.8556 12.6313 28.2184 11.3549 29.528 10.045H29.528ZM32.6857 28.512H24.9315C24.1214 28.512 23.6372 29.1703 23.6372 29.8068V30.172C23.6372 30.9824 24.2951 31.4665 24.9315 31.4665H32.6857C33.4962 31.4665 33.9804 30.8084 33.9804 30.172V29.8068C33.9804 29.0324 33.4601 28.512 32.6857 28.512V28.512ZM32.6857 23.8599H24.9315C24.1214 23.8599 23.6372 24.5182 23.6372 25.1547V25.4279C23.6372 26.2386 24.2951 26.7229 24.9315 26.7229H32.6857C33.4962 26.7229 33.9804 26.0646 33.9804 25.4279V25.1547C33.9804 24.5182 33.4963 23.8599 32.6857 23.8599ZM32.6857 19.3899H24.9315C24.1214 19.3899 23.6372 20.0482 23.6372 20.6847V20.8672C23.6372 21.6773 24.2951 22.1616 24.9315 22.1616H32.6857C33.4962 22.1616 33.9804 21.5035 33.9804 20.8672V20.6847C33.9804 19.9102 33.4601 19.3899 32.6857 19.3899Z"
                fill="black"
                fill-opacity="0.4"
              />
            </svg>
          </div>
        </div>
        <div class="flex flex-col items-center gap-25px">
          <div class="bg-[#F9F9F9] rounded-28px p-26 w-100%" v-for="value in 10">
            <div class="flex items-center mb-20">
              <img src="/src/assets/icon/public/logo_full.png" class="w-60 h-60" alt="" />
              <div class="text-[32px] font-800 text-[#000000] font-roboto ml-10">LON</div>
            </div>
            <div class="flex flex-col gap-20px">
              <div class="flex items-center justify-between w-100%">
                <div class="flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="6"
                    height="6"
                    viewBox="0 0 13 13"
                    fill="none"
                  >
                    <circle cx="6.86377" cy="6.81348" r="6" fill="#65DE1E" />
                  </svg>
                  <div
                    class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase ml-8"
                  >
                    类型：
                  </div>
                </div>
                <div
                  class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase"
                >
                  LP挖矿
                </div>
              </div>
              <div class="flex items-center justify-between w-100%">
                <div class="flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="6"
                    height="6"
                    viewBox="0 0 13 13"
                    fill="none"
                  >
                    <circle cx="6.86377" cy="6.81348" r="6" fill="#65DE1E" />
                  </svg>
                  <div
                    class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase ml-8"
                  >
                    数量：
                  </div>
                </div>
                <div
                  class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase"
                >
                  1LON
                </div>
              </div>
              <div class="flex items-center justify-between w-100%">
                <div class="flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="6"
                    height="6"
                    viewBox="0 0 13 13"
                    fill="none"
                  >
                    <circle cx="6.86377" cy="6.81348" r="6" fill="#65DE1E" />
                  </svg>
                  <div
                    class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase ml-8"
                  >
                    时间：
                  </div>
                </div>
                <div
                  class="text-[24px] font-500 text-[#000000] font-roboto line-height-32px uppercase"
                >
                  2025-10-10 12:00:00
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.record {
  width: 100%;

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    position: relative;
  }
}
</style>
